<template>
  <section class="page page-home">
    <!-- filter弹窗 -->
    <el-dialog title="过滤器" width="30%" :visible.sync="show_filter">
      <el-form :model="filter_form">
        <el-form-item label="名称：">
          <el-input v-model="filter_form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="被测参数重要级别：">
          <el-checkbox-group v-model="filter_form.list">
            <el-checkbox
              v-for="(item, idx) in filter_list"
              v-bind:key="idx"
              :label="item.title"
            ></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="show_filter = false">取 消</el-button>
        <el-button type="primary" @click="setFilter">确 定</el-button>
      </div>
    </el-dialog>

    <div class="main_top">
      <div class="main_top_wrap">
        <date-time
          :dateTime="form.dateTime"
          v-on:change-date-time="changeDateTime"
        >
          <div class="filter_box" @click="showFilter">
            <img src="../../assets/images/filter_icon.svg" alt="" />
            <div>过滤器</div>
          </div>
        </date-time>

        <div class="flex_wrap">
          <div class="flex_box">
            <div
              class="flex_item"
              v-for="(item, index) in lineList"
              :key="index"
              @click="changeFlexItem(index)"
              :class="currentFlexIndex == index ? 'active' : ''"
            >
              <span class="label">
                {{ item.name }}
              </span>
              <img
                src="../../assets/images/settings.png"
                alt=""
                class="setting"
                v-if="item.status === 1"
                v-on:click.stop="editLine(item)"
              />
              <img
                src="../../assets/images/delete.png"
                alt=""
                v-if="item.status === 1"
                class="delete"
                v-on:click.stop="delLine(item.id)"
              />
            </div>
            <div class="add cursor_pointer">
              <img
                src="../../assets/images/add.png"
                alt=""
                @click="add_item()"
              />
            </div>
          </div>
        </div>
        <div class="main_center">
          <div class="left_nav">
            <div
              class="nav_item"
              :class="navValue === 'tree' ? 'active' : ''"
              @click="changeLeftNav"
            >
              <img
                src="../../assets/images/graph_tree.png"
                alt=""
                class="nav_img"
              />
            </div>
            <div
              class="nav_item"
              :class="navValue === 'menu' ? 'active' : ''"
              @click="changeLeftNav"
            >
              <img
                src="../../assets/images/graph_menu.svg"
                alt=""
                class="nav_img"
              />
            </div>
          </div>
          <div class="right_content">
            <div
              class="table_content"
              v-if="navValue === 'menu'"
              v-loading="bar_loading"
            >
              <div
                style="text-align: center; position: absolute;left: 33%;z-index: 1;background-color: white;width: 38%;font-size: 15px"
              >
                参数整体合格率
              </div>
              <div class="table_content_value">
                <table>
                  <tr v-for="(item, idx) in dataList" :key="idx">
                    <td class="title">
                      <span v-if="item.orderList" class="indent"></span>
                      <span class="color_box"></span>
                      {{ item.name }}
                    </td>
                    <td class="chart">
                      <div
                        class="gantt_chart"
                        v-for="(vo, key) in item.orderList"
                        :key="key"
                        :id="'gantt' + item.id + '-' + key"
                      ></div>
                    </td>
                  </tr>
                </table>
              </div>
              <table>
                <!-- datazoom -->
                <tr>
                  <td class="title"></td>
                  <td class="chart" id="datazoom"></td>
                </tr>
                <tr>
                  <td class="title"></td>
                  <td class="chart">
                    <div class="datazoom_value">
                      <div
                        class="start_value"
                        v-bind:style="{ left: datazoom_value.start + '%' }"
                      >
                        {{ datazoom_value.startValue }}
                      </div>
                      <div
                        class="end_value"
                        v-bind:style="{ left: datazoom_value.end + '%' }"
                      >
                        {{ datazoom_value.endValue }}
                      </div>
                    </div>
                  </td>
                </tr>
              </table>
            </div>
            <div class="bar_chart_box" v-if="navValue === 'tree'">
              <div class="bread_brumb">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                  <el-breadcrumb-item
                    v-for="(item, idx) in breadCrumb"
                    :key="idx"
                    >{{ item }}</el-breadcrumb-item
                  >
                </el-breadcrumb>
              </div>
              <div id="bar_chart_box" v-loading="bar_loading"></div>

              <div class="bar_slider_box">
                <i class="el-icon-caret-left" @click="changeShiftIdx(-1)"></i>
                <div class="bar_slider">
                  <el-slider
                    v-model="shift_idx"
                    :step="1"
                    :max="shift_list.length"
                    :format-tooltip="formatBarTooltip"
                    show-stops
                  >
                  </el-slider>
                </div>
                <i class="el-icon-caret-right" @click="changeShiftIdx(1)"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>
<script>
import {
  getCrustalLus,
  getLusProcess,
  getLusMachine,
  getLusPart,
  getFilter,
  updateFilter,
  getShift,
} from '@/api/lus'
import { getAbilities, delAbility } from '@/api/ability'
import DateTime from '@/components/DateTime'

import abilityDetail from './XM/abilityDetail.vue'

export default {
  components: { DateTime },
  data() {
    return {
      form: {
        dateTime: [],
      },
      filter_form: {
        name: '',
        list: [],
      },
      filter_id: null,
      filter_list: [
        {
          id: 1,
          title: '关键的',
        },
        {
          id: 2,
          title: '很重要的',
        },
        {
          id: 3,
          title: '重要的',
        },
        {
          id: 4,
          title: '略重要的',
        },
        {
          id: 5,
          title: '次重要的',
        },
      ],
      show_filter: false,
      showDrawer: false,
      pages: this.$mpages,
      currentIndex: 0,
      currentFlexIndex: 0,
      navValue: 'menu',
      dataList: [],
      barChart: null,
      barChartData: null,
      breadCrumb: ['全局'],
      processId: 0,
      lineList: [],
      datazoom_value: {
        start: 0,
        end: 100,
        startValue: '',
        endValue: '',
      },
      shift_list: [],
      shift_idx: 0,
      bar_loading: false,
      machineId: null,
    }
  },
  watch: {
    shift_idx() {
      if (!this.machineId) {
        this.getLusMachine()
      } else {
        this.getLusPart()
      }
    },
  },
  created() {
    // this.form.dateTime.push(this.formattime(new Date(), "yyyy.MM.dd hh:mm"));
    // this.form.dateTime.push(this.formattime(new Date(), "yyyy.MM.dd hh:mm", 1));

    const end_time = new Date().format('yyyy-MM-dd hh:mm:ss')
    let start = new Date()
    start.setTime(start.getTime() - 3600 * 1000 * 24)
    let start_time = new Date(start).format('yyyy-MM-dd hh:mm:ss')

    this.form.dateTime.push(start_time)
    this.form.dateTime.push(end_time)
  },
  mounted() {
    this.getAbilities()
    this.getFilter()

    // 设置datazoom初始值
    this.datazoom_value.startValue = this.form.dateTime[0]
    this.datazoom_value.endValue = this.form.dateTime[1]
  },
  methods: {
    async getFilter() {
      const { status, data } = await getFilter()
      if (status == 200) {
        this.filter_form.name = data.name

        let list = []
        data.importance.split(',').map((vo) => {
          list.push(this.filter_list[vo - 1].title)
        })
        this.filter_form.list = list
        this.filter_id = data.id
        this.updateChart()
      }
    },
    async setFilter() {
      let post_data = { name: this.filter_form.name }

      let filterIds = {}
      this.filter_list.map((vo) => {
        filterIds[vo.title] = vo.id
      })
      let importanceArr = []
      this.filter_form.list.map((item) => {
        importanceArr.push(filterIds[item])
      })
      post_data['importance'] = importanceArr.join(',')

      let { status, data } = await updateFilter(post_data)
      if (status == 200) {
        this.filter_id = data.id
        this.updateChart()
        this.show_filter = false
      }
    },
    changeShiftIdx(val) {
      if (val < 0 && this.shift_idx >= 1) {
        this.shift_idx--
      } else if (val > 0 && this.shift_idx <= this.shift_list.length) {
        this.shift_idx++
      }
    },
    formatBarTooltip(idx) {
      return (
        this.shift_list[idx]?.startTime + '至' + this.shift_list[idx]?.endTime
      )
    },
    showFilter() {
      this.show_filter = true
    },
    // 更新图表
    updateChart() {
      if (this.navValue === 'menu') {
        // 更新甘特图
        this.bar_loading = true
        this.getCrustalLus()
      } else {
        // this.getLusMachine();
        this.getShiftList()
      }
    },
    // 获取班次数据
    async getShiftList() {
      const { data } = await getShift({
        startTime: this.form.dateTime[0],
        endTime: this.form.dateTime[1],
      })
      this.shift_list = data
      this.shift_idx = 0
      this.getLusMachine()
    },
    async getAbilities() {
      const res = await getAbilities()
      if (res.status == 200) {
        this.lineList = res.data
      }
    },
    async getCrustalLus() {
      let request_data = {
        startTime: this.form.dateTime[0],
        endTime: this.form.dateTime[1],
      }
      if (this.lineList.length > 0 && this.lineList[this.currentFlexIndex].id) {
        request_data.abilityId = this.lineList[this.currentFlexIndex].id
      }
      if (this.filter_id) {
        request_data.filterId = this.filter_id
      }
      const { status, data } = await getCrustalLus(request_data)
      if (status == 200) {
        this.dataList = data
        setTimeout(() => {
          this.drawGanttChart()
        }, 200)
      }
    },
    // 修改生产线回调
    changeFlexItem(idx) {
      this.currentFlexIndex = idx
      this.updateChart()
    },
    // 修改时间回调
    changeDateTime(e) {
      this.form.dateTime = e
      this.datazoom_value.startValue = e[0]
      this.datazoom_value.endValue = e[1]
      this.updateChart()
    },
    //
    async getLusProcess() {
      let request_data = {
        startTime: this.form.dateTime[0],
        endTime: this.form.dateTime[1],
      }
      if (this.lineList.length > 0 && this.lineList[this.currentFlexIndex].id) {
        request_data.abilityId = this.lineList[this.currentFlexIndex].id
      }
      if (this.filter_id) {
        request_data.filterId = this.filter_id
      }
      const res = await getLusProcess(request_data)
      if (res.status == 200) {
        this.barChartData = res.data
        this.breadCrumb = ['全局']
        setTimeout(() => {
          this.drawBarChart(res.data)
        }, 200)
      }
    },
    async getLusMachine() {
      this.bar_loading = true
      let request_data = {
        // processId: data.id,
        startTime: this.shift_list[this.shift_idx]?.startTime,
        endTime: this.shift_list[this.shift_idx]?.endTime,
      }
      if (this.lineList.length > 0 && this.lineList[this.currentFlexIndex].id) {
        request_data.abilityId = this.lineList[this.currentFlexIndex].id
      }
      if (this.filter_id) {
        request_data.filterId = this.filter_id
      }
      const res = await getLusMachine(request_data)
      if (res.status == 200) {
        this.barChartData = res.data
        // this.processId = data.id;
        this.breadCrumb = ['全局']
        this.drawBarChart(res.data)
      }
    },
    async getLusPart() {
      this.bar_loading = true
      let request_data = {
        // processId: this.processId,
        machineId: this.machineId.id,
        startTime: this.shift_list[this.shift_idx]?.startTime,
        endTime: this.shift_list[this.shift_idx]?.endTime,
      }
      if (this.lineList.length > 0 && this.lineList[this.currentFlexIndex].id) {
        request_data.abilityId = this.lineList[this.currentFlexIndex].id
      }
      if (this.filter_id) {
        request_data.filterId = this.filter_id
      }
      const res = await getLusPart(request_data)
      if (res.status == 200) {
        this.barChartData = res.data
        let bread = this.breadCrumb
        bread.push(this.machineId.name)
        this.breadCrumb = bread
        this.drawBarChart(res.data)
      }
    },
    // 绘制条形图
    drawBarChart(res) {
      this.barChart = this.$echarts.init(
        document.getElementById('bar_chart_box')
      )
      let cate = []
      let disqualificationRateData = []
      let hasQualifiedRateData = []
      let qualifiedRateData = []
      res.map((item) => {
        cate.push(item.name)
        disqualificationRateData.push(item.disqualificationRate)
        hasQualifiedRateData.push(item.hasQualifiedRate)
        qualifiedRateData.push(item.qualifiedRate)
      })

      let option = {
        grid: {
          height: '80%',
        },
        xAxis: {
          type: 'category',
          data: cate,
          axisLabel: {
            interval: 0,
            width: 130,
            rotate: 45,
            overflow: 'truncate',
          },
        },
        tooltip: {
          trigger: 'axis',
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '不合格的被测参数',
            data: disqualificationRateData,
            type: 'bar',
            stack: 'one',
            itemStyle: {
              color: '#F63F49',
            },
          },
          {
            name: '有条件合格的被测参数',
            data: hasQualifiedRateData,
            type: 'bar',
            stack: 'one',
            itemStyle: {
              color: '#FDE361',
            },
          },
          {
            name: '合格的被测参数',
            data: qualifiedRateData,
            type: 'bar',
            stack: 'one',
            itemStyle: {
              color: '#52C84E',
            },
          },
        ],
      }

      this.barChart.setOption(option)
      // 监听图表点击事件
      this.barChart.on('click', (params) => {
        let idx = params.dataIndex
        switch (this.breadCrumb.length) {
          case 1:
            // 清除上次添加的点击事件
            this.barChart.off('click')
            this.machineId = this.barChartData[idx]

            this.getLusPart()
            break
          case 2:
            var val = this.barChartData[idx]
            var url =
              '#/pageAbility/detail?k1000=' +
              val.id +
              '&k0010=' +
              this.machineId.id +
              '&startTime=' +
              this.shift_list[this.shift_idx]?.startTime +
              '&endTime=' +
              this.shift_list[this.shift_idx]?.endTime
            if (val.orderId) {
              url = url + '&k0053=' + val.orderId
            }
            window.location.href = url
            break
        }
      })
      this.bar_loading = false
    },

    editLine(row) {
      this.$layer.iframe({
        shadeClose: false,
        content: {
          content: abilityDetail,
          parent: this,
          data: { row: row },
        },
        maxmin: true,
        area: ['600px', '600px'],
        title: row.id ? '编辑' : '新增',
      })
    },
    add_item() {
      this.editLine({})
    },
    delLine(id) {
      this.$confirm('此操作将永久删除该选项, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        const { status } = await delAbility(id)

        if (status == 200) {
          this.$message({
            type: 'success',
            message: '删除成功!',
          })

          this.getAbilities()
        }
      })
    },

    /* 页码改变 */
    pageChange(param) {
      if (param.type === 'index') this.pages.page = param.val
      if (param.type === 'sizes') this.pages.totalRow = param.val
      this.getList()
    },
    changeLeftNav() {
      this.navValue = this.navValue === 'menu' ? 'tree' : 'menu'
      this.updateChart()
    },

    // 绘制甘特图
    drawGanttChart() {
      let that = this
      let option = {
        grid: {
          left: 'center',
          top: 'middle',
          width: '90%',
          height: '100%',
        },
        tooltip: {
          trigger: 'item',
          appendToBody: true,
          formatter: function(params) {
            let vo = params.data[8]

            return (
              "<div style='text-align:center;'><h3>" +
              vo.k0010 +
              '</h3></div>' +
              vo.minTime +
              '至' +
              vo.maxTime +
              "<br/><span style='color:red;'>不合格的检测参数：" +
              vo.disqualificationRate +
              "%</span><br/><span style='color:orange;'>有条件合格的检测参数：" +
              vo.hasQualifiedRate +
              "%</span><br/><span style='color:green;'>合格的检测参数：" +
              vo.qualifiedRate +
              '%</span>' +
              '<br/>测量值数：' +
              vo.count
            )
          },
        },
        xAxis: [
          {
            show: false,
            type: 'time',
            min: this.form.dateTime[0],
            max: this.form.dateTime[1],
          },
        ],
        dataZoom: {
          show: false,
          filterMode: 'weakFilter',
          left: 'center',
          top: 'middle',
          width: '90%',
          throttle: 0,
          showDetail: false,
          // realtime: false,
          height: 8,
          handleSize: 16,
          handleIcon:
            'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5M36.9,35.8h-1.3z M27.8,35.8 h-1.3H27L27.8,35.8L27.8,35.8z', //画个圆形
        },
        yAxis: [
          {
            show: false,
            type: 'category',
          },
        ],
        series: [
          {
            name: 'crustal',
            type: 'custom',
            renderItem: renderGanttItem,
            dimensions: [
              '工位',
              '开始时间',
              '结束时间',
              '合格率',
              '有合格的被测参数比率',
              '不合格率',
            ],
            encode: {
              x: [1, 2],
              y: 0,
              // tooltip: [1, 2, 3, 4, 5],
            },
            tooltip: {},
            data: [],
          },
        ],
      }

      function renderGanttItem(params, api) {
        let cateIdx = api.value(0)

        let startPoint = api.coord([api.value(1), cateIdx])
        let endPoint = api.coord([api.value(2), cateIdx])

        // 整块的参数，高度固定为26px
        let barWidth = endPoint[0] - startPoint[0]
        let barHeight = params.coordSys.height
        let bar_x = startPoint[0]
        let bar_y = 0

        // 除去边框的参数，边框固定为2px
        let width = barWidth - 4
        let height = barHeight - 4
        let x = bar_x + 2
        let y = bar_y + 2

        let qualifiedRate = api.value(3)
        let hasQualifiedRate = api.value(4)
        let disqualificationRate = api.value(5)

        let barText = api.value(6)
        var barTextWidth = that.$echarts.format.getTextRect(barText).width

        let text = width > barTextWidth + 4 ? barText : ''

        // 背景图层，黑色，用于区分每个测量区间
        let bgRect = clipRectByRect(params, {
          x: bar_x,
          y: bar_y,
          width: barWidth,
          height: barHeight,
        })
        // 默认底色为白色
        let normalRect = clipRectByRect(params, {
          x: x,
          y: y,
          width: width,
          height: height,
        })
        // 不合格
        let disqualificationRect = clipRectByRect(params, {
          x: x,
          y: y,
          width: width * disqualificationRate,
          height: height,
        })

        // 有合格的被测参数
        let hasQualifiedRect = clipRectByRect(params, {
          x: x + width * disqualificationRate,
          y: y,
          width: width * hasQualifiedRate,
          height: height,
        })
        // 合格
        let qualifiedRect = clipRectByRect(params, {
          x: x + width * (disqualificationRate + hasQualifiedRate),
          y: y,
          width: width * qualifiedRate,
          height: height,
        })
        // 文字
        let rectText = clipRectByRect(params, {
          x: x,
          y: y,
          width: width,
          height: height,
        })
        return {
          type: 'group',
          children: [
            {
              type: 'rect',
              shape: bgRect,
              style: api.style({ fill: '#58585A' }),
            },
            {
              type: 'rect',
              shape: normalRect,
              style: api.style({ fill: '#fff' }),
            },
            {
              type: 'rect',
              shape: disqualificationRect,
              style: api.style({ fill: '#F66672' }),
            },
            {
              type: 'rect',
              shape: hasQualifiedRect,
              style: api.style({ fill: '#FEE98A' }),
            },
            {
              type: 'rect',
              shape: qualifiedRect,
              style: api.style({ fill: '#72D478' }),
            },
            {
              type: 'rect',
              ignore: !rectText,
              shape: rectText,
              style: api.style({
                fill: 'transparent',
                stroke: 'transparent',
                text: text,
                textFill: '#fff',
              }),
            },
          ],
        }
      }
      let gantts = []
      this.dataList.map((item, idx) => {
        if (item.orderList) {
          item.orderList.map((val, key) => {
            let gantt = this.$echarts.init(
              document.getElementById('gantt' + item.id + '-' + key)
            )

            let data = []
            val.map((vo) => {
              let val = [
                item.name,
                vo.minTime,
                vo.maxTime,
                vo.qualifiedRate / 100,
                vo.hasQualifiedRate / 100,
                vo.disqualificationRate / 100,
                vo.k1002,
                idx,
                vo,
              ]

              data.push(val)
            })
            option.series[0].data = data
            option.series[0].name = item.name
            option.yAxis[0].data = [item.name]

            gantt.setOption(option)
            gantt.on('click', (params) => {
              let idx = params.data[7]
              let dataIndex = params.dataIndex
              let val = this.dataList[idx].orderList[key][dataIndex]

              // 隐藏toolTip
              gantt.dispatchAction({
                type: 'hideTip',
              })

              let url =
                '#/pageAbility/detail?k1000=' +
                val.k1000 +
                '&k0010=' +
                val.k0010 +
                '&startTime=' +
                val.minTime +
                '&endTime=' +
                val.maxTime
              if (val.k0053) {
                url = url + '&k0053=' + val.k0053
              }
              window.location.href = url
            })
            gantts.push(gantt)
            this.$set(item, 'gantt', gantt)
          })
        }
      })
      // 绘制统一的datazoom
      let datazoom = this.$echarts.init(document.getElementById('datazoom'))
      option.series[0].data = []
      option.dataZoom.show = true
      datazoom.setOption(option)

      // 监听datazoom，使用datazoomTimer进行节流
      let datazoomTimer = null
      // 将datazoom事件传递给其他chart
      datazoom.on('datazoom', (params) => {
        let value = datazoom.getOption().dataZoom[0]

        this.datazoom_value.start = value.start
        this.datazoom_value.startValue = new Date(value.startValue).format(
          'yyyy-MM-dd hh:mm:ss'
        )
        this.datazoom_value.end = value.end
        this.datazoom_value.endValue = new Date(value.endValue).format(
          'yyyy-MM-dd hh:mm:ss'
        )
        if (datazoomTimer) clearTimeout(datazoomTimer)
        datazoomTimer = setTimeout(() => {
          gantts.map((gantt) => {
            setTimeout(() => {
              gantt.dispatchAction(gantt.makeActionFromEvent(params))
            }, 1)
          })
        }, 1)
      })
      // gantts.push(datazoom);

      let resizeTimer = null
      window.addEventListener('resize', () => {
        if (resizeTimer) clearTimeout(resizeTimer)
        resizeTimer = setTimeout(() => {
          gantts.map((chart) => {
            chart.resize()
          })
          datazoom.resize()
        }, 200)
      })

      // 绑定全部的图表，让datazoom联动
      // this.$echarts.connect(gantts);

      function clipRectByRect(params, rect) {
        return that.$echarts.graphic.clipRectByRect(rect, {
          x: params.coordSys.x,
          y: params.coordSys.y,
          width: params.coordSys.width,
          height: params.coordSys.height,
        })
      }
      this.bar_loading = false
    },
  },
}
</script>

<style lang="scss" scoped>
.page-home {
  width: 100% !important;
  color: rgba(16, 16, 16, 100);
  font-family: SourceHanSansSC-regular;
  margin: auto 0 0px 0;
  .main_top {
    .date_wrap {
      margin: 0px 15px 0 21px;
      display: flex;
      .date_img {
        vertical-align: middle;
        margin-right: 10px;
      }
    }
    .filter_box {
      display: flex;
      align-items: center;
      color: #42c14c;
    }
    .nav_wrap {
      margin-top: 20px;
      display: flex;
      align-items: center;
      height: 48px;
      line-height: 48px;
      text-align: center;
      background: #3694ff;
      .nav_item {
        color: #fff;
        padding: 0px 20px;
        border-right: 1px solid #fff;
        cursor: pointer;
      }
      .nav_item:last-child {
        border-right: 0;
      }
      .nav_item.active {
        background-color: rgba(39, 97, 219, 100);
      }
      .nav_item:hover {
        background-color: rgba(39, 97, 219, 100);
      }
    }
    .flex_wrap {
      margin: 15px 15px 0 21px;
      border-radius: 4px;
      background-color: rgba(62, 62, 62, 100);
      .flex_box {
        height: 48px;
        padding: 0 13px;
        display: flex;
        align-items: center;
        .flex_item {
          display: flex;
          cursor: pointer;
          align-items: center;
          border-radius: 4px;
          border: 1px solid rgba(187, 187, 187, 100);
          font-size: 12px;
          color: #fff;
          padding: 8px;
          margin-right: 7px;
          img {
            vertical-align: middle;
            height: 16px;
          }
          .label {
            display: inline-block;
            height: 16px;
          }
        }
        .flex_item.active {
          background-color: rgba(54, 148, 255, 100);
          border: 1px solid rgba(54, 148, 255, 100);
        }
        .flex_item:hover {
          background-color: rgba(54, 148, 255, 100);
          border: 1px solid rgba(54, 148, 255, 100);
        }
        .setting {
          margin-left: 5px;
          margin-right: 5px;
        }
        .setting,
        .delete {
          display: none;
        }
        .flex_item:hover .setting,
        .flex_item:hover .delete {
          display: block;
        }
      }
    }
  }
  .bar_slider_box {
    width: 80%;
    margin: 0px auto 20px auto;
    display: flex;
    align-items: center;
    .bar_slider {
      flex: 1;
      margin: 0 10px;
    }
    i {
      font-size: 32px;
      color: #409eff;
      cursor: pointer;
    }
  }
  .main_center {
    margin: 15px 15px 0 21px;
    background: #fff;
    height: calc(100vh - 260px);
    display: flex;
    .left_nav {
      width: 57px;
      text-align: center;
      .nav_item {
        background-color: rgba(40, 40, 40, 100);
        height: 48px;
        .nav_img {
          width: 33px;
          height: 33px;
          margin-top: 8px;
        }
      }
      .nav_item.active {
        background-color: rgba(54, 148, 255, 100);
      }
    }
    .right_content {
      flex: 1;
      position: relative;
      // min-height: 200px;
      border: 1px solid #d7d7d7;
      .bread_brumb {
        padding: 20px;
        background-color: rgba(40, 40, 40, 100);
      }
      .bar_chart_box {
        height: 100%;
        display: flex;
        flex-direction: column;
      }
      #bar_chart_box {
        padding: 20px;
        // height: px;
        flex: 1;
      }
      .table_content {
        padding: 20px;
        box-sizing: border-box;
        height: 100%;
        display: flex;
        flex-direction: column;
        // overflow-y: scroll;
        .table_content_value {
          flex: 1;
          overflow-y: scroll;
        }
        table {
          width: 100%;
          table-layout: fixed;
          word-break: break-all;
        }
        .title {
          width: 20%;
          font-size: 14px;
          line-height: 16px;
          height: 30px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          padding-right: 20px;
          .indent {
            display: inline-block;
            width: 2em;
          }
          .color_box {
            display: inline-block;
            width: 5px;
            height: 14px;
            background: #000;
          }
        }
        .chart {
          width: 80%;
          .gantt_chart {
            margin: 5px auto;
            height: 30px;
          }
          .datazoom_value {
            position: relative;
            width: 90%;
            margin: 0 auto;
            // background: red;
            // height: 26px;
            .start_value {
              position: absolute;
              white-space: nowrap;
              transform: translateX(-50%);
            }
            .end_value {
              position: absolute;
              white-space: nowrap;
              transform: translateX(-50%);
            }
          }
        }
      }
    }
  }
}
</style>
<style>
.el-slider__bar {
  background-color: transparent !important;
}
</style>
